<!doctype html>
<html lang="zh" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">


    <title>教师登陆</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet"/>

    <!-- c3.js Charts Plugin -->
    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet"/>

</head>

<body class="">
<div class="page">
    <div class="page-single">
        <div class="container">
            <div class="row">
                <div class="col col-login mx-auto" id="app">
                    <div class="text-center mb-6">
                        <img src="./assets/brand/tabler.svg" class="h-6" alt="">
                    </div>
                    <form class="card" action="3" onsubmit="return false" @submit.prevent="login()">
                        <div class="card-body p-6">
                            <div class="card-title">登陆您的教师账户</div>
                            <div class="form-group">
                                <label class="form-label">教师ID</label>
                                <input type="number" class="form-control" id="exampleInputEmail1"
                                       aria-describedby="emailHelp"
                                       placeholder="ID" v-model="teacherId">
                            </div>
                            <div class="form-group">
                                <label class="form-label">
                                    密码
                                </label>
                                <input type="password" class="form-control" id="exampleInputPassword1"
                                       placeholder="Password"
                                       v-model="teacherPwd">
                            </div>

                            <div class="form-footer">
                                <button id="login" type="submit" class="btn btn-primary btn-block">登陆</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                teacherId: null,
                teacherPwd: null
            }
        },
        methods: {
            login: function () {
                $("#login").text("登陆中...")
                axios.post("/onlineTeacher/api/login", {
                    teacherId: this.teacherId,
                    teacherPwd: this.teacherPwd
                }).then(function (response) {
                    if (response["data"]["status"] == "400") {
                        alert(response["data"]["msg"])
                        $("#login").text("登陆")
                    } else {
                        location.href = "index"
                    }

                })
            }
        },


    })


</script>

</html>